<template>
  <div class="config-page">
    <h4 class="config-title" v-if="!loading">{{config.inspectTypeName}}配置</h4>
    <h5 class="config-second-title" v-if="!loading">{{config.inspectTypeName}}异常阀值</h5>
    <Card class="config-info" v-if="!loading">
      <Row class="config-body">
        <Col :span="8" v-for="configForm in configFormList" :key="configForm.inspectParamId" class="config-col">
          <label>{{configForm.inspectParamDesc}}</label>
          <span class="config-symbol">{{configForm.inspectParamSymbol | symbolHandle}}</span>
          <Input v-model.trim="configForm.inspectParamThresholds" class="config-input" placeholder="请输入" @on-blur="inputBlur(configForm)" ></Input>
          <span class="config-unit" v-if="configForm.inspectParamUnit">{{configForm.inspectParamUnit}}</span>
        </Col>
      </Row>
    </Card>

    <div class="config-child-list" v-if="!loading">
      <div class="config-child" v-for="configChild in inspectConfigVos" :key="configChild.inspectTypeId">
        <h5 class="config-second-title">{{configChild.inspectTypeName}}异常阀值</h5>
          <Card class="config-info">
          <Row class="config-body">
            <Col :span="8" v-for="param in configChild.inspectParamInfos" v-if="configChild.inspectParamInfos" :key="param.inspectParamId" class="config-col">
              <label>{{param.inspectParamDesc}}</label>
              <span class="config-symbol">{{param.inspectParamSymbol | symbolHandle}}</span>
              <Input v-model.trim="param.inspectParamThresholds" class="config-input" placeholder="请输入" @on-blur="inputBlur(param)"></Input>
              <span class="config-unit" v-if="param.inspectParamUnit">{{param.inspectParamUnit}}</span>
            </Col>
          </Row>
        </Card>
      </div>
    </div>

    <div class="config-save" v-if="!loading">
      <Button type="primary" shape="circle" @click="saveConfig" >保存</Button>
    </div>
    <Spin v-if="loading"></Spin>
  </div>
</template>

<script>
  import Fetch from '@/api/request'

  export default {
    name: 'inspectConfig',
    data() {
      return {
        config: {},
        configFormList: [],
        inspectConfigVos: [],
        loading: true
      }
    },
    mounted() {
      this.getData()
    },
    methods: {
      // 配置参数修改校验
      inputBlur(configForm) {
        if (isNaN(parseFloat(configForm.inspectParamThresholds))) {
          configForm.inspectParamThresholds = 0
        } else {
          configForm.inspectParamThresholds = parseFloat(configForm.inspectParamThresholds)
        }
      },
      // 保存配置
      saveConfig() {
        // 拼接父类对象参数
        let parentConfig = [{
          inspectTypeId: this.config.inspectTypeId,
          inspectTypeName: this.config.inspectTypeName,
          inspectLevel: this.config.inspectLevel,
          inspectParentTypeId: this.config.inspectParentTypeId,
          inspectParentTypeName: this.config.inspectParentTypeName,
          inspectParamInfos: this.configFormList
        }]
        Fetch.post({
          url: '/api/inspect/config/update',
          params: parentConfig.concat(this.inspectConfigVos),
          self: 'then'
        }).then((result) => {
          if (result.data && result.data.resultCode === 1) {
            this.$Message.success({
              content: '配置保存成功！',
              duration: this.DURATION
            })
          } else {
            this.$Message.error({
              content: '配置保存失败，请重试！',
              duration: this.DURATION
            })
          }
        })
      },
      // 获取配置信息
      getData() {
        this.loaidng = true
        Fetch.get({
          url: '/api/inspect/config/search',
          params: {inspectTypeId: localStorage.getItem('inspectTypeId')},
          done: () => {
            this.loading = false
          }
        }).then((res) => {
          this.config = res.data
          if (res.data.inspectParamInfos && res.data.inspectParamInfos.length > 0) {
            this.configFormList = res.data.inspectParamInfos
          }
          if (res.data.inspectConfigVos && res.data.inspectConfigVos.length > 0) {
            this.inspectConfigVos = res.data.inspectConfigVos
          }
        })
      }
    },
    filters: {
      symbolHandle(symbol) {
        if (symbol === 'GT') {
          return '>'
        } else if (symbol === 'LT') {
          return '<'
        } else if (symbol === 'GTE') {
          return '>='
        } else if (symbol === 'LTE') {
          return '<='
        } else if (symbol === 'NQ') {
          return '='
        } else if (symbol === 'NEQ') {
          return '='
        }
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .config-title {
    font-size: 16px;
    text-align: center;
    font-weight: bold;
    margin-top: 20px;
  }
.config-info {
  margin: 5px 20px;
}
.config-info /deep/ {
  .config-info-title {
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    > span {
      display: inline-block;
      line-height: 34px;
      font-weight: bold;
    }
  }
  .config-col {
    margin: 6px 0;
  }
  .config-symbol {
    margin: 0 5px;
  }
  .config-input {
    width: 60px;
    input {
      text-align: center;
    }
  }
  .config-unit {
    margin-left: 5px;
  }
}
.config-second-title {
  margin-left: 20px;
  margin-top: 20px;
}
  .config-weight {
    float: right;
  }
  .config-child-list {
    padding-bottom: 30px;
  }
  .config-save {
    margin-bottom: 100px;
    text-align: center;
  }
  .config-save /deep/ {
    .ivu-btn-primary.ivu-btn-circle {
      width: 100px;
    }
  }
  .config-page /deep/ {
    .ivu-spin {
      margin: auto;
      padding: 60px;
      .ivu-spin-main {
        display: inline-block;
      }
    }
  }
</style>
